<template>
	<view class="details">
		<view class="video" >
			<video :src="video.url" controls objectFit="fill"  :poster="image"></video>
		</view>
		<view class="writer">
			<image :src="video.avatar" mode="" class="img"></image>
			<view class="name">
				<p>{{ video.netname }}</p>
				<p>{{ video.create_time_text }}.{{ video.sign }}</p>
			</view>
		</view>
		<list :res="news"></list>
		<view class="kong"></view>
		<image :src="image" mode="" class="xuanchuan"></image>
		<view style="padding-left: 30upx;">
			<comment :res="Comment" :count="count"></comment>
		</view>
	</view>
</template>

<script>
import list from '@/components/newsList/list.vue';
import comment from '@/components/newsList/commentVideo.vue';
export default {
	components: {
		list,
		comment
	},
	data() {
		return{
			id:'',
			video:'',
			news:'',
			Comment:'',
			count:0,
			image:'../../static/img/news/xianchuan1.png'
		}
	},
	onLoad(e) {
		this.id=e.id;
		this.getDetails(); 
	},
	methods:{
		getDetails(){
			uni.request({
				url: this.baseUrl+"/Video/details",   
				dataType: "json",
				data: {id:this.id},
				success: (res) => {  
					this.video=res.data.data.list.video;
					this.news=res.data.data.list.news;
					this.Comment=res.data.data.list.Comment;
					this.count=res.data.data.list.video.count;
				}
			})
		}
	}
}	
</script>

<style lang="scss">
.details{
	width: 100%;
	.video{
		video{
		width:100%;
		height:380upx ;
		}
	}
	.writer {	
		width: 100%;
		height: 100upx;
		padding: 30upx 0upx 0upx 30upx;
		display: inline-flex;
		image {
			width: 90upx;
			height: 90upx;
			border-radius:50%;
			margin-right: 20upx;
			
		}
		.name {
			width: 500upx;
			p:first-child {
				font-size: 28upx;
				padding-bottom: 15upx;
			}
			p:last-child {
				font-size: 28upx;
				color: #999999;
			}
		}
	}
	.kong{
		width: 100%;
		height: 20upx;
		background-color: #f5f6f7;
	}
	.xuanchuan{
		width: 690upx;
		height: 388upx;
		padding: 30upx 30upx 30upx 30upx;
	}
}
</style>
